<template>
  <div>
    <van-icon
      :name="value >= 1 ? 'good-job' : 'good-job-o'"
      :color="value >= 1 ? 'red': '#777'"
      @click="likeFn"
    />
  </div>
</template>

<script>
import {addLike, deleteLike} from '@/api/article'
export default {
  props: ['value', 'articleId'],
  methods: {
    async likeFn() {
      try {
        let res = 1
        if(this.value=== 1) {
          // 取消喜欢
          await deleteLike(this.articleId)

          res = -1
        } else {
          // 改成喜欢
          await addLike(this.articleId)
        }

        // 值 要么是1 喜欢， 要么是 -1 不喜欢
        this.$emit('input', res)

        this.$toast('操作成功')
      } catch(er) {
        this.$toast('操作失败')
      }

    }
  }
}
</script>

<style scoped>
.van-icon{
  font-size: 40px;
}
</style>
